{% extends 'base.html' %}

{% block title %}课程详情页 | mtianyan慕课小站{% endblock %}
{% load staticfiles %}
{% block custom_bread%}
    <section>
        <div class="wp">
            <ul  class="crumbs">
                 <li><a href="index.html">首页</a>></li>
                <li><a href="course-list.html">公开课程</a>></li>
				<li>课程详情</li>
            </ul>
        </div>
    </section>
{% endblock %}
{% block content %}
    <section>
	<div class="wp">
		<div class="groupPurchase_detail detail">
			<div class="toppro">
				<div class="left">
					<div class="picbox">
						<div class="tb-booth tb-pic">
							<img width="440" height="445" src="{{ MEDIA_URL }}{{ course.image }}" class="jqzoom" />
						</div>

					</div>
					<div class="des">
						<h1 title="django 从入门到精通体验开始了">{{ course.name }}</h1>
						<span class="key">{{ course.desc }}</span>
						<div class="prize">
							<span class="fl">难度：<i class="key">{{ course.get_degree_display }}</i></span>
							<span class="fr">学习人数：{{ course.students }}</span>
						</div>
						<ul class="parameter">
							<li><span class="pram word3">时&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;长：</span><span>{{ course.learn_times }}</span></li>
                            <li><span class="pram word3">章&nbsp;节&nbsp;数：</span><span>{{ course.get_zj_nums }}</span></li>
                            <li><span class="pram word3">课程类别：</span><span title="">{{ course.category }}</span></li>
							<li class="piclist"><span class="pram word4">学习用户：</span>
                                    {% for user_course in course.get_learn_users %}
                                    <span class="pic"><img width="40" height="40" src="{{ user_course.user.image }}"/></span>
                                    {% endfor %}
                                
							</li>
						</ul>
						<div class="btns">
							<div class="btn colectgroupbtn"  id="jsLeftBtn">
                                   {% if has_fav_course %}已收藏 {% else %}收藏{% endif %}
                            </div>
                                <div class="buy btn"><a style="color: white" href="{% url 'courses:course_info' course.id %}">开始学习</a></div>
						</div>
					</div>
                    <div class="group-share-box">
                        <div class="bdsharebuttonbox"
                             data-text="django开始了"
                             data-desc="我在#慕课网#发现了"
                             data-comment=""
                             data-url="/group/groupdetail/15/">
                            <span class="fl">分享到：</span>
                            <a href="#" class="bds_more" data-cmd="more"></a>
                            <a title="分享到QQ空间" href="#" class="bds_qzone" data-cmd="qzone"></a>
                            <a title="分享到新浪微博" href="#" class="bds_tsina" data-cmd="tsina"></a>
                            <a title="分享到腾讯微博" href="#" class="bds_tqq" data-cmd="tqq"></a>
                            <a title="分享到人人网" href="#" class="bds_renren" data-cmd="renren"></a>
                            <a title="分享到微信" href="#" class="bds_weixin" data-cmd="weixin"></a>
                        </div>
                    </div>
				</div>
				<div class="right">
					<div class="head">
						<h1>授课机构</h1>
						<p>世界名校，课程权威</p>
					</div>
					<div class="pic">
                        <a href="/company/14/">
                            <img width="150" height="80" src="{{ MEDIA_URL }}{{ course.course_org.image }}"/>
                        </a>
                    </div>
					<a href="/company/14/">
                        <h2 class="center" title="清华大学">{{ course.course_org.name }}</h2>
                    </a>
					<div class="btn  notlogin
					     "data-favid="14" id="jsRightBtn">
                         {% if has_fav_org %}已收藏 {% else %}收藏{% endif %}
                    </div>
					<div class="clear">
						<ul>
                            <li>
                                <span>课 &nbsp;程&nbsp; 数：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   {{ course.get_zj_nums }}</span>
                            </li>
                            <li>
                                <span>教 &nbsp;师&nbsp; 数：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {{ course.course_org.teacher_set.count }}</span>
                            </li>
							<li>所在地区：&nbsp;&nbsp;{{ course.course_org.address }}</li>
							<li>认&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;证&nbsp;:
                                &nbsp;&nbsp;
								    <img title="金牌机构", src="../images/gold.png"/>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
    <section>
	<div class="wp">
		<div class="list groupPurchase_detail_pro">
			<div class="left layout">
				<div class="head">
					<ul class="tab_header">
						<li class="active">课程详情</li>
					</ul>
				</div>
				<div class="tab_cont tab_cont1">
                    
					<p>&nbsp; &nbsp; django与vuejs实战项目</p><p><img src="../media/courses/ueditor/aobama_20161113225044_773.png" title="" alt="aobama.png"/> </p><table><tbody><tr class="firstRow"><td style="word-break: break-all;" width="53" valign="top">课程</td><td style="word-break: break-all;" width="53" valign="top">课时<br/> </td><td style="word-break: break-all;" width="53" valign="top">难度<br/> </td><td style="word-break: break-all;" width="53" valign="top">时长<br/> </td><td style="word-break: break-all;" width="53" valign="top">学习人数<br/> </td><td style="word-break: break-all;" width="53" valign="top">点击数<br/> </td><td style="word-break: break-all;" width="53" valign="top">点击数</td><td style="word-break: break-all;" width="53" valign="top">点击数</td></tr><tr><td style="word-break: break-all;" width="53" valign="top">django开发<br/> </td><td style="word-break: break-all;" width="53" valign="top">20<br/> </td><td style="word-break: break-all;" width="53" valign="top">中级<br/> </td><td style="word-break: break-all;" width="53" valign="top">30<br/> </td><td style="word-break: break-all;" width="53" valign="top">100000<br/> </td><td style="word-break: break-all;" width="53" valign="top">100000<br/> </td><td style="word-break: break-all;" width="53" valign="top">100000<br/> </td><td style="word-break: break-all;" width="53" valign="top">100000<br/> </td></tr><tr><td width="53" valign="top"><br/> </td><td width="53" valign="top"><br/> </td><td width="53" valign="top"><br/> </td><td width="53" valign="top"><br/> </td><td width="53" valign="top"><br/> </td><td width="53" valign="top"><br/> </td><td width="53" valign="top"><br/> </td><td width="53" valign="top"><br/> </td></tr><tr><td width="53" valign="top"><br/> </td><td width="53" valign="top"><br/> </td><td width="53" valign="top"><br/> </td><td width="53" valign="top"><br/> </td><td width="53" valign="top"><br/> </td><td width="53" valign="top"><br/> </td><td width="53" valign="top"><br/> </td><td width="53" valign="top"><br/> </td></tr><tr><td width="53" valign="top"><br/> </td><td width="53" valign="top"><br/> </td><td width="53" valign="top"><br/> </td><td width="53" valign="top"><br/> </td><td width="53" valign="top"><br/> </td><td width="53" valign="top"><br/> </td><td width="53" valign="top"><br/> </td><td width="53" valign="top"><br/> </td></tr><tr><td width="53" valign="top"><br/> </td><td width="53" valign="top"><br/> </td><td width="53" valign="top"><br/> </td><td width="53" valign="top"><br/> </td><td width="53" valign="top"><br/> </td><td width="53" valign="top"><br/> </td><td width="53" valign="top"><br/> </td><td width="53" valign="top"><br/> </td></tr></tbody></table><p><br/> </p><p><img src="http://img.baidu.com/hi/jx2/j_0025.gif"/> </p><p><br/> </p><h1 class="ue_t" label="Title center" name="tc" style="border-bottom-color:#cccccc;border-bottom-width:2px;border-bottom-style:solid;padding:0px 4px 0px 0px;text-align:center;margin:0px 0px 20px;"><span style="color:#c0504d;">[键入文档标题]</span></h1><p style="text-align:center;"><strong class="ue_t">[键入文档副标题]</strong></p><h3><span class="ue_t" style="font-family:幼圆">[标题 1]</span></h3><p class="ue_t" style="text-indent:2em;">对于“插入”选项卡上的库，在设计时都充分考虑了其中的项与文档整体外观的协调性。 您可以使用这些库来插入表格、页眉、页脚、列表、封面以及其他文档构建基块。 您创建的图片、图表或关系图也将与当前的文档外观协调一致。</p><p class="ue_t" style="text-indent:2em;"><img src="http://127.0.0.1:8000../media/courses/ueditor/57aa86a0000145c512000460_20161210234050_865.jpg" title="" alt="57aa86a0000145c512000460.jpg"/> </p><h3><span class="ue_t" style="font-family:幼圆">[标题 2]</span></h3><p><img src="http://api.map.baidu.com/staticimage?center=116.410899,39.863624&zoom=11&width=530&height=340&markers=116.404,39.915" width="530" height="340"/> </p><p class="ue_t" style="text-indent:2em;">在“开始”选项卡上，通过从快速样式库中为所选文本选择一种外观，您可以方便地更改文档中所选文本的格式。 您还可以使用“开始”选项卡上的其他控件来直接设置文本格式。大多数控件都允许您选择是使用当前主题外观，还是使用某种直接指定的格式。</p><h3><span class="ue_t" style="font-family:幼圆">[标题 3]</span></h3><p>2016-12-10</p><p class="ue_t">对于“插入”选项卡上的库，在设计时都充分考虑了其中的项与文档整体外观的协调性。 您可以使用这些库来插入表格、页眉、页脚、列表、封面以及其他文档构建基块。 您创建的图片、图表或关系图也将与当前的文档外观协调一致。</p><p><br/> </p>
                    
				</div>
				<div class="tab_cont tab_cont2" >
					<div class="comment">
						<div class="comenlist">

	                    </div>
					</div>
				</div>
			</div>
			<div class="right layout">
				<div class="head">相关课程推荐</div>
                <div class="group_recommend">
                    {% for course in relate_courses %}
                        <dl>
                            <dt>
                                <a target="_blank" href="">
                                    <img width="240" height="220" class="scrollLoading" src="{{ MEDIA_URL }}{{ course.image }}"/>
                                </a>
                            </dt>
                            <dd>
                                <a target="_blank" href=""><h2> {{ course.name }}</h2></a>
                                <span class="fl">学习时长：<i class="key">{{ course.learn_times }}</i></span>
                            </dd>
                        </dl>
                    
                    {% endfor %}

                </div>
			</div>
		</div>
	</div>
</section>
{% endblock %}

{% block custom_js %}
<script type="text/javascript">
//收藏分享
function add_fav(current_elem, fav_id, fav_type){
    $.ajax({
        cache: false,
        type: "POST",
        url:"{% url "org:add_fav" %}",
        data:{'fav_id':fav_id, 'fav_type':fav_type},
        async: true,
        beforeSend:function(xhr, settings){
            xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
        },
        success: function(data) {
            if(data.status == 'fail'){
                if(data.msg == '用户未登录'){
                    window.location.href="/login/";
                }else{
                    alert(data.msg)
                }

            }else if(data.status == 'success'){
                current_elem.text(data.msg)
            }
        },
    });
}

$('#jsLeftBtn').on('click', function(){
    add_fav($(this), {{ course.id }}, 1);
});

$('#jsRightBtn').on('click', function(){
    add_fav($(this), {{ course.course_org.id }}, 2);
});


</script>
{% endblock %}
